<template>
    <div>
        <!-- 页面描述 -->
        <el-alert title="警告：不正确的存储桶策略可能会导致存储桶中的所有对象均无法访问。" type="warning" show-icon :closable="false" />

        <!-- Codemirror 编辑器 -->
        <codemirror v-model="policyJson" placeholder="在此输入或粘贴您的 JSON 策略..." :style="{ height: '400px' }"
            :autofocus="true" :indent-with-tab="true" :tab-size="2" :extensions="extensions" />

        <!-- 操作按钮 -->
        <div style="margin-top: 20px;">
            <el-button type="primary" @click="savePolicy" :loading="isSaving">保存</el-button>
            <el-button type="danger" @click="deletePolicy" :loading="isDeleting">删除策略</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Codemirror } from 'vue-codemirror';
import { json } from '@codemirror/lang-json';
import { oneDark } from '@codemirror/theme-one-dark'; // (可选) 暗色主题
import apiClient from '@/api';
import { ElMessage, ElMessageBox } from 'element-plus';

const props = defineProps({ bucketName: String });

const policyJson = ref('');
const isSaving = ref(false);
const isDeleting = ref(false);

// Codemirror 配置
const extensions = [json(), oneDark]; // (可选)

// 加载现有策略
async function fetchPolicy() {
    try {
        const response = await apiClient.get(`/api/v1/buckets/${props.bucketName}/policy`);
        // 如果返回的是空对象，编辑器显示空字符串，否则格式化为带缩进的JSON字符串
        policyJson.value = Object.keys(response.data).length > 0
            ? JSON.stringify(response.data, null, 2)
            : '';
    } catch (error) {
        ElMessage.error('加载策略失败');
    }
}

// 保存策略
async function savePolicy() {
    let policyObject;
    try {
        // 保存前先验证是否为合法的JSON
        policyObject = JSON.parse(policyJson.value);
    } catch (e) {
        ElMessage.error('策略不是有效的 JSON 格式');
        return;
    }

    isSaving.value = true;
    try {
        await apiClient.put(`/api/v1/buckets/${props.bucketName}/policy`, policyObject);
        ElMessage.success('策略保存成功');
    } catch (error) {
        ElMessage.error(error.response?.data?.error || '策略保存失败');
    } finally {
        isSaving.value = false;
    }
}

// 删除策略
const deletePolicy = async () => {
    try {
        // 使用 try...catch 结构来包裹整个确认和删除流程
        await ElMessageBox.confirm(
            '此操作将永久删除该存储桶的策略，且不可恢复。确定要继续吗？',
            '删除存储桶策略',
            {
                confirmButtonText: '确定删除',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );

        // 只有当用户点击“确定”后，才会执行到这里
        // isDeleting.value = true; // (假设您有加载状态)

        await apiClient.delete(`/api/v1/buckets/${props.bucketName}/policy`);

        ElMessage.success('存储桶策略已成功删除');

        // 删除成功后，刷新策略内容
        fetchPolicy();

    } catch (error) {
        // 【关键】捕获所有错误
        if (error === 'cancel') {
            // 如果是用户主动取消，则静默处理或给一个提示
            ElMessage.info('已取消删除操作');
        } else {
            // 如果是 API 调用失败等其他错误
            console.error("删除策略失败:", error);
            ElMessage.error(error.response?.data?.error || '删除失败，请重试');
        }
    } finally {
        // isDeleting.value = false;
    }
};

onMounted(fetchPolicy);
</script>